.container {
  $itemWidth: 50px;
  $margin: 1px;
  $perHeight: calc(1.732 * $itemWidth + 4 * $margin - 1px);

  height: 580px;
  margin-bottom: calc($itemWidth / -2);
  flex: 0 0 120%;
  transform: translate(-10%, calc($itemWidth / -2));
  background: radial-gradient(
    circle at var(--xPos) var(--yPos),
    transparent 0,
    transparent 50px,
    #000 150px,
    #000 1000px
  );
  position: relative;
  overflow: hidden;
  // font-size必须
  font-size: 0;
  cursor: pointer;

  &::before {
    content: "";
    height: 100%;
    width: calc(($itemWidth / 2) + calc($margin / 2));
    shape-outside: repeating-linear-gradient(
      transparent 0,
      transparent 80px,
      #000 80px,
      #000 $perHeight
    );
    float: left;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      45deg,
      #f44336,
      #ff9800,
      #ffe607,
      #09d7c4,
      #1cbed3,
      #1d8ae2,
      #bc24d6
    );
    z-index: 1;
    mix-blend-mode: darken;
    animation: change 8s infinite linear;
    mask: radial-gradient(
      circle at var(--xPos) var(--yPos),
      #000 0,
      #000 50px,
      transparent 150px,
      transparent 150px
    );
  }

  .item {
    width: $itemWidth;
    height: calc($itemWidth * 1.1547);
    background: #000;
    flex: 0 0 auto;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    margin: $margin;
    margin-bottom: calc($margin - $itemWidth * 0.2885);
    display: inline-block;
    z-index: 2;
  }

  @keyframes change {
    100% {
      filter: hue-rotate(360deg);
    }
  }
}
